<template>
    <div class="chart-container">
        <chart id="LineBarEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>
<script>
import {getNewEcharts} from '@/api/api'
import echart from '@/mixins/echart'
export default {
    name: 'LineBarEchart',
    mixins: [echart],
    created(){
        
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"bar",
                sourceId:this.data.options.sourceId,
                columnParam: {}
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    const sData = res.data.sData;
                    this.data.options.series = []
                    sData.map((item,i)=>{
                        this.data.options.series.push({
                            data: item.data,
                            name: item.name,
                            type: item.type,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#555'
                                }
                            },
                            itemStyle: {
                                color: this.echartColors[i],
                                barBorderRadius: [5, 5, 0, 0]
                            },
                            barWidth: ''
                        })
                    })
                    this.data.options.xAxis.data = res.data.xData
                    this.data.options.legend.data = res.data.yData
                }
            })
        }
    }
}
</script>
